<template>
	<view class="info">
		
		<!-- 标题 -->
		<view class="title" @click="copy(note.title)">
			<text>{{note.title}}</text>
		</view>
		
		<!-- 网址 -->
		<view class="link u-f-ac text-link" v-if="note.url" @click="copy(note.url)">
			<view class="icon">
				<u-icon name="attach" color="#4f83ca" size="32rpx"></u-icon>
			</view>
			<view class="url u-f-ajc line-1">
				<text>{{note.url}}</text>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="noteContent">
			<!-- #ifdef MP-WEIXIN -->
			<towxml :nodes="$towxmlFunc(note.note?note.note:'','markdown',{
				events:{
					tap:(e)=>{
						this.markdownClick(e)
					},
					copy:(e)=>{
						this.markdownCodeCopy(e)
					}
				}
			})"></towxml>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<text @click.stop="copy(note.note)">{{note.note}}</text>
			<!-- #endif -->
		</view>
		
	</view>
</template>

<script>
	import towxml from '@/static/towxml/towxml';
	export default {
		components: {
			towxml
		},
		props:{
			note:Object
		},
		methods:{
			// 点击监听
			markdownClick(event){
				// 如果是图片点击 开始预览
				if (event.currentTarget.dataset.data && event.currentTarget.dataset.data.attr && (event.currentTarget.dataset.data.attr.class == "h2w__img")) {
				  // 传入图片地址，调用微信图片预览 API
				  return wx.previewImage({
					current: event.currentTarget.dataset.data.attr.src, // 当前显示图片的http链接
					urls: imgUrls
				  })
				}
				// 判断如果是链接则复制链接
				if(event.currentTarget.dataset.data && event.currentTarget.dataset.data.tag == 'navigator' && event.currentTarget.dataset.data.attrs && event.currentTarget.dataset.data.attrs.class == 'h2w__a'){
					return this.copy(event.currentTarget.dataset.data.attrs.href)
				}
				
				return this.copy(this.note.note)
			},
			// 代码点击复制监听
			markdownCodeCopy(e){
				let copyed_code = ""
				const extract_code = (parsed_item) => {
					if (!parsed_item.children) {
						return
					}
					parsed_item.children.forEach(item => {
						if (item.raw_tag == "ul" || (item.attrs.class && item.attrs.class
								.indexOf("h2w__lineNum") != -1)) {
							// console.log('find number')
							return
						} else if (item.raw_tag == "p") {
							copyed_code = copyed_code + "\n\n"
						} else if (item.raw_tag == "br") {
							copyed_code = copyed_code + "\n"
						} else if (item.type == "text") {
							copyed_code = copyed_code + item.text
						} else {
							extract_code(item)
						}
					})
				}
				extract_code(e.target.dataset.data)
				// 复制到剪切板
				this.copy(copyed_code)
			}
		}
	}
</script>

<style scoped lang="scss">
.info{
	padding: 30rpx;
	.title{
		color: #4E4C56;
		font-size: 32rpx;
		font-weight: 200;
	}
	.link{
		margin-top: 10rpx;
		.icon{
			margin-right: 10rpx;
		}
		.url{
			text-decoration: underline;
			font-size: 28rpx;
		}
	}
	.noteContent{
		margin-top: 30rpx;
		border-top: 1px solid #f8f8f8;
		color: #4E4C56;
		border-radius: 10rpx;
		font-size: 30rpx;
		padding: 20rpx 0;
		font-weight: 100;
		word-wrap:break-word;
		word-break: break-word;
	}
}
</style>